<template>
  <div class="wrapper">
    <template v-for="item in items">
        <div class="inner" :style="item.style">
            <div class="title" :style="item.titleStyle">{{item.name}}</div>
            <div class="value" :style="item.valueStyle">{{item.value}}</div>
        </div>
    </template>
  </div>
</template>

<script>
export default {
  name:'',
  components: {},
  data() {
    return {
    };
  },
  props: {
    items:{
        default:()=>{
            return []
        }
    }
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {}
};
</script>
<style scoped>
.wrapper {
  width:100%;
  height:100%;
  display:flex;
  flex-wrap: wrap;
  justify-content:flex-start;
  align-items:center;
}
.inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    margin: 10px;
    background-color: rgba(119, 172, 48, 0.484);
    width: 45%;    
    border-radius: 8px;
    position: relative;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    box-shadow: 0 1px 2px rgba(255,255,255,.2);
    border-color: #eee;
}
.title {
    color: white;
    font-size: 25px;
}
.value {
    color: white;
    font-size: 40px;
    font-weight: bold;
}
</style>